<template>
	<view class="index">
		<img-slide :imgSlideData="imgSlideData"></img-slide>
		<nav-title></nav-title>

		<start-end-point class="top-line" @startClick="startClick()" @endClick="endClick()" @startToggle="startToggle" :start="startCtry"
		 :end="endCtry"></start-end-point>

		<view class="cu-form-group top-line">
			<picker mode="date" :value="date" :start="startTime" :end="endTime" @change="DateChange" style="padding-right: 0px">
				<view style="display: flex; justify-content: space-between;">
					<view>
						{{speedDate}} <text class="text-gray text-sm" style="margin-left: 8px">{{speedWeek}}</text>
					</view>
					<view class="cuIcon-right"></view>
				</view>
			</picker>
		</view>

		<view class="bg-white padding top-line">
			<button class="cu-btn bg-gradual-orange lg" style="width: 100%;" @click="goSearchList()">开始搜索</button>
			<view class="padding-top-sm flex justify-between">
				<view class="text-sm">
					<text class="padding-lr-xs" v-for="(his,hisIndex) in historyCtry">
						{{his.startCtry}} <text class="myIcon-jiantou padding-lr-xs"></text> {{his.endCtry}}
					</text>
				</view>
				<view @click="closeHis">清空历史</view>
			</view>
		</view>
	</view>
</template>

<script>
	import imgSlide from '../../components/imgSlide.vue';
	import navTitle from '../../components/nav-title.vue';
	import StartEndPoint from '../../components/StartEndPoint.vue';
	export default {
		components: {
			imgSlide,
			navTitle,
			StartEndPoint
		},
		data() {
			return {
				imgSlideData: [],
				endTime: this.$comm.getNextDate(15),
				startTime: this.$comm.formatDate(Date.now()),
				date: this.$comm.formatDate(Date.now()),
				startCtry: "北京",
				endCtry: "上海",
				historyCtry: []
			}
		},
		onLoad() {
			this.getSwiperList()
			this.getHistoryCtry()
		},
		computed: {

			speedDate() {
				let date = new Date(this.date)
				var m = date.getMonth() + 1;
				var d = date.getDate();
				return `${m} 月 ${d} 日 `
			},
			speedWeek() {
				let date = new Date(this.date)
				return "周" + "日一二三四五六".charAt(date.getDay());
			}
		},
		methods: {
			getHistoryCtry() {
				this.historyCtry = this.$db.get('historyCtry') || []
			},
			startClick() {
				this.$comm.navigateTo('/pages/selectCity/selectCity')
				uni.$once('emitCity', (res) => {
					this.startCtry = res
				})
			},
			endClick() {
				this.$comm.navigateTo('/pages/selectCity/selectCity')
				uni.$once('emitCity', (res) => {
					this.endCtry = res
				})
			},
			startToggle() {
				let temp = null
				temp = this.startCtry;
				this.startCtry = this.endCtry;
				this.endCtry = temp;
			},
			DateChange(e) {
				this.date = e.detail.value
			},
			goSearchList() {
				let ctry = {
					startCtry: this.startCtry,
					endCtry: this.endCtry
				}
				if (this.historyCtry.findIndex((item) => item.startCtry == this.startCtry && item.endCtry == this.endCtry) == -1) {
					if (this.historyCtry.length >= 3) {
						this.historyCtry.shift()
					}
					this.historyCtry.push(ctry)
					this.$db.set('historyCtry', this.historyCtry)
				}
				this.$store.dispatch('saveOrderInfoAction', {
					startRegion: this.startCtry,
					endRegion: this.endCtry,
					speedDate: this.date
				})
				this.$comm.navigateTo('/pages/searchlist/searchlist')
			},
			getSwiperList() {
				this.$api.getSwiperList().then(res => {
					if (res.code) {
						this.imgSlideData = res.data
					}
				})
			},
			closeHis() {
				this.historyCtry = []
				this.$db.set('historyCtry', this.historyCtry)
			}
		}
	}
</script>

<style lang="scss">

</style>
